<template>
  <view class="register-page">
    <!-- 顶部区域 -->
    <view class="header">
      <!-- <view class="close-btn" @click="handleClose">×</view> -->
      <view class="title-group">
        <text class="main-title">欢迎注册</text>
        <text class="sub-title">一站式工业设计任务交易平台</text>
      </view>
      <image class="header-icon" src="/static/header-icon.png" mode="aspectFit"></image>
    </view>

    <!-- 表单区域 -->
    <form class="form">
      <!-- 手机号输入 -->
      <view class="form-item">
        <label class="label">手机号</label>
        <input
          class="input"
          type="number"
          v-model="phone"
          placeholder="请输入手机号"
          :disabled="true"
        />
      </view>

      <!-- 验证码输入 + 发送验证码按钮 -->
      <view class="form-item">
          <label class="label">验证码</label>
          <view style="display: flex; align-items: center; margin-top:30rpx;">
          <input
            class="input"
            type="text"
            v-model="code"
            placeholder="请输入"
            style="width: 60%; margin: 0;"
          />
          <button
            class="send-code-btn"
            :disabled="isSending"
            @click="handleSendCode"
          >
            {{ sendCodeText }}
          </button>
        </view>
      </view>

      <!-- 设置密码 -->
      <view class="form-item">
        <label class="label">设置密码</label>
        <input
          class="input"
          :type="newPasswordType"
          v-model="newPassword"
          placeholder="6-8位大小写字母与数字组合"
        />
        <view class="eye-icon" @click="toggleNewPasswordVisible">
          <image
            :src="newPasswordEyeIcon"
            mode="aspectFit"
          />
        </view>
      </view>

      <!-- 二次确认密码 -->
      <view class="form-item">
        <label class="label">二次确认密码</label>
        <input
          class="input"
          :type="confirmPasswordType"
          v-model="confirmPassword"
          placeholder="6-8位大小写字母与数字组合"
        />
        <view class="eye-icon" @click="toggleConfirmPasswordVisible">
          <image
            :src="confirmPasswordEyeIcon"
            mode="aspectFit"
          />
        </view>
      </view>

      <!-- 协议勾选 -->
      <view class="agreement-item">
        <input
          type="chackbox"
          class="agreement-checkbox"
          v-model="agreeProtocol"
          color="#00bfa5"
        />
        <text class="agreement-text">同意《平台用户协议》</text>
      </view>
    </form>

    <!-- 注册按钮 -->
    <view
      class="register-btn"
      :disabled="!agreeProtocol || !code || !newPassword || !confirmPassword"
      @click="handleRegister"
    >
      注册
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
// import { showToast, navigateBack } from 'uni-app';

// 表单数据
const phone = ref('18788888888');
const code = ref('');
const newPassword = ref('');
const confirmPassword = ref('');

// 验证码发送状态
const isSending = ref(false);
const sendCodeText = ref('发送验证码');
let countdown = 60;

// 密码可见性
const newPasswordType = ref('password');
const confirmPasswordType = ref('password');
const newPasswordEyeIcon = ref('/static/eye-close.png');
const confirmPasswordEyeIcon = ref('/static/eye-close.png');

// 协议勾选状态
const agreeProtocol = ref(true);

// 关闭页面
const handleClose = () => {
  navigateBack();
};

// 发送验证码
const handleSendCode = () => {
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    showToast({
      title: '请输入正确的手机号',
      icon: 'none',
    });
    return;
  }

  isSending.value = true;
  const timer = setInterval(() => {
    countdown--;
    sendCodeText.value = `${countdown}s后重发`;
    if (countdown === 0) {
      clearInterval(timer);
      isSending.value = false;
      sendCodeText.value = '发送验证码';
      countdown = 60;
    }
  }, 1000);
};

// 切换新密码可见性
const toggleNewPasswordVisible = () => {
  newPasswordType.value = newPasswordType.value === 'password' ? 'text' : 'password';
  newPasswordEyeIcon.value = newPasswordType.value === 'password'
    ? '/static/eye-close.png'
    : '/static/eye-open.png';
};

// 切换确认密码可见性
const toggleConfirmPasswordVisible = () => {
  confirmPasswordType.value = confirmPasswordType.value === 'password' ? 'text' : 'password';
  confirmPasswordEyeIcon.value = confirmPasswordType.value === 'password'
    ? '/static/eye-close.png'
    : '/static/eye-open.png';
};

// 注册逻辑
const handleRegister = () => {
  if (!code.value) {
    showToast({
      title: '请输入验证码',
      icon: 'none',
    });
    return;
  }

  if (newPassword.value.length < 6 || newPassword.value.length > 8) {
    showToast({
      title: '密码长度需为6-8位',
      icon: 'none',
    });
    return;
  }

  if (newPassword.value !== confirmPassword.value) {
    showToast({
      title: '两次输入的密码不一致',
      icon: 'none',
    });
    return;
  }

  // 这里可以添加实际的注册接口调用逻辑
  showToast({
    title: '注册成功',
    icon: 'success',
  });
  navigateBack();
};
</script>

<style scoped>
.register-page {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(to bottom, #e6f7ef, #ffffff);
  padding: 30rpx;
  padding-top: 176rpx;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50rpx;
}

.close-btn {
  font-size: 50rpx;
  color: #333;
}

.title-group {
  display: flex;
  flex-direction: column;
}

.main-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.sub-title {
  font-size: 28rpx;
  color: #666;
}

.header-icon {
  width: 160rpx;
  height: 160rpx;
}

.form {
  width: 100%;
}

.form-item {
  /* display: flex; */
  align-items: center;
  margin-bottom: 30rpx;
}

.label {
  width: 120rpx;
  font-size: 32rpx;
  color: #666;
}

.input {
  margin-top: 30rpx;
  flex: 1;
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  font-size: 32rpx;
  border: 1px solid #eee;
}

.send-code-btn {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #00bfa5;
  color: #fff;
  font-size: 32rpx;
  margin-left: 30rpx;
  border-radius: 10rpx;
}

.send-code-btn:disabled {
  background-color: #a5d6c8;
  opacity: 0.8;
}

.eye-icon {
  width: 40rpx;
  height: 40rpx;
  margin-left: 20rpx;
  cursor: pointer;
}

.agreement-item {
  display: flex;
  align-items: center;
  margin-bottom: 50rpx;
}

.agreement-checkbox {
  transform: scale(0.8);
  margin-right: 10rpx;
}

.agreement-text {
  font-size: 28rpx;
  color: #666;
}

.register-btn {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #00bfa5;
  color: #fff;
  font-size: 36rpx;
  border-radius: 50rpx;
}

.register-btn:disabled {
  background-color: #a5d6c8;
  opacity: 0.8;
}
</style>